<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8" />
    <title>~</title>
    <style>
        * {
            border: none;
            background: none;
            empty-cells: show;
            transition: all 0.6s ease-in-out;
            text-shadow: -1px 1px 1px #b46db6b2, 1px -1px 1px #a2c9b2b3;
            text-shadow: -0.3px 0.2px 2px #000000ab, 0.3px -0.2px 2px #e2e2e23a;
        }
        
        pre {
            display: inline;
        }
        
        body {
            background-attachment: fixed;
            background-size: cover;
            background-image: url("./a.jpg");
            overflow-x: hidden;
            overflow-y: hidden;
        }
        
        #主盒 {
            border-radius: 50px;
            position: absolute;
            text-align: center;
            right: 5%;
            top: -100%;
            background-color: rgba(30, 30, 30, 0.433);
            color: rgba(240, 240, 240, 0.8);
            font-size: 30px;
            padding: 10px;
            box-shadow: -1px 1px 2px #8c344e85, 1px -1px 2px #ebfa8c33;
        }
        
        #当前时间,
        #抽人 {
            font-size: 60px;
            transition: all 0.2s ease-in-out;
        }
        
        .倒计时 {
            font-size: 72px;
            color: rgba(53, 226, 120, 0.904);
        }
    </style>
    <script>
        中考时间 = "2021/06/20";

        function eid(ele) {
            return document.getElementById(ele);
        }

        function 启动() {
            xxh();
            eid("主盒").style.top = "5%";
            日期();
            中考倒计时();
            清空抽人()
        }

        function xxh() {
            ssd();
            aaa();
            setTimeout("xxh()", 1000);
        }

        function 中文星期(项) {
            var 中文星期列表 = ["日", "一", "二", "三", "四", "五", "六"];
            return 中文星期列表[项];
        }

        function ssd() {
            var 现在时间 = new Date();
            var 小时 = 现在时间.getHours();
            var 分钟 = 现在时间.getMinutes();
            var 秒数 = 现在时间.getSeconds();
            eid("当前时间").innerHTML = 时间补零(小时) + " : " + 时间补零(分钟) + " : " + 时间补零(秒数);
        }

        function 时间补零(获得数) {
            var 参考值 = Number(获得数);
            if (参考值 < 10) {
                return "0" + 参考值;
            } else {
                return 参考值;
            }
        }

        function 获得现在时间秒数() {
            return Math.floor(new Date().getTime() / 1000);
        }

        function 清空抽人() {
            eid("抽人").innerHTML = "抽卡";
            抽人动画();
        }

        var 全班同学姓名表 = [1];

        function 抽人() {
            var 项 = Math.floor(Math.random() * 全班同学姓名表.length);
            eid("抽人").innerHTML = 全班同学姓名表[项];
            抽人动画();
        }

        function 抽人动画() {
            eid("抽人").style.boxShadow = '-1px 1px 1px #b46db6b2, 1px -1px 1px #a2c9b2b3';
            setTimeout(f => {
                eid("抽人").style.boxShadow = '';
            }, 600)
        }

        function 倒计时算法(类, 秒数) {
            switch (类) {
                case 1:
                    return 秒数 % 60;
                    break;
                case 2:
                    return Math.floor((秒数 % 3600) / 60);
                    break;
                case 3:
                    return Math.floor((秒数 % 86400) / 3600);
                    break;
                case 4:
                    return Math.floor(秒数 / 86400);
                    break;
            }
        }

        function 中考倒计时() {
            var 开始值 = 获得现在时间秒数()
            var 末值 = Math.floor(new Date(中考时间).getTime() / 1000);
            var 秒数 = 末值 - 开始值;
            var 日 = 倒计时算法(4, 秒数);
            if (秒数 >= 0)
                eid("中考倒计时").innerHTML = "距中考:<font style='background-color:rgba(250,250,250,0.91);color:rgb(250,45,45);'>" + 日 + "</font>天";
            else
                eid("中考倒计时").innerHTML = "中考加油！！！";
        }

        function aaa() {
            a = 0
            var 开始值 = Math.floor(new Date().getTime() / 100) / 10;
            var 末值 = Math.floor(new Date("2021/01/25 17:30").getTime() / 1000);
            var 秒数 = 末值 - 开始值;
            if (秒数 < 0) {
                秒数 = -1 * 秒数
                a = 1
            }
            var 日 = 倒计时算法(4, 秒数);
            var h = 时间补零(倒计时算法(3, 秒数));
            var m = 时间补零(倒计时算法(2, 秒数));
            var s = bul(时间补零(Math.floor(倒计时算法(1, 秒数) * 10) / 10));

        }

        function bul(sz) {
            if (sz == Math.floor(sz)) {
                return sz + '.0'
            } else {
                return sz
            }
        }

        function 日期() {
            var 当前时间 = new Date();
            var 年 = 当前时间.getFullYear();
            var 分钟 = 当前时间.getMonth() + 1;
            var 日 = 当前时间.getDate();
            var 周 = 当前时间.getDay();
            eid("日期").innerHTML = 年 + "年" + 分钟 + "月" + 日 + "日" + "\n<font style='font-size:50px;'>星期" + 中文星期(周) + "</font>";
        }

        function 中考时间提示() {
            alert(`以${中考时间}算`);
        }

        function 日期刷新() {
            日期();
            中考倒计时();
            //transition: all 0.6s ease-in-out;
            eid('日期').style.transition = 'all 0s ease-in-out';
            eid('日期').style.color = '#5555';
            setTimeout(f => {
                eid('日期').style.transition = 'all 1s ease-in-out';
                eid('日期').style.color = 'rgba(240, 240, 240, 0.8)';
            }, 400);
        }
    </script>
</head>

<body onload="启动()"><b>
        <div id="主盒">
            <pre id="当前时间" onclick="清空抽人()"></pre>
            <div>
                <pre id="日期" onclick="日期刷新();"></pre>
            </div>
            <pre id="中考倒计时" class="倒计时" onclick="中考时间提示()"></pre>
            <br />
            <pre id="抽人" onclick="抽人()"></pre>
    </b></body>

</html>